<template>
  <div class="flex space-x-1">
    <div 
    :class="getItemClasses(item)"
    v-for="item in hourArr" :key="item" >{{  item  }}</div>
  </div>
</template>

<script lang="ts" setup >
import { ref } from 'vue'

const HOURS = 24;

const hourArr = ref(getHourArr())

const props = defineProps({
  startTime: {
    type: String,
    default: '13:14'
  },
  endTime: {
    type: String,
    default: '18:14'
  }
})

function getHourArr() {
  const hoursArr: number[] = [];
  const startHour = new Date().getHours();

  for (let i=1; i <= HOURS; i++) {
    if (startHour + i - 1 <= HOURS) {
      hoursArr.push(startHour + i - 1);
    } else {
      hoursArr.push(startHour + i - HOURS - 1);
    }
  }

  return hoursArr
}

function getItemClasses(num: number) {
  let classnames = '';
  const { start, end } = getUseTimeRange();

  if (num >= start && num <= end) {
    classnames = 'bg-red-500 text-white'
  } else {
    classnames = 'bg-white'
  }

  return `flex-1 text-center ${classnames}`
}

function getUseTimeRange() {
  const start = props.startTime.split(':')[0];
  const end = props.endTime.split(':')[0];

  return {
    start: Number(start),
    end: Number(end)
  }
}

</script>